<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#top{
				padding: 20px;
			}
			#bottom{
				position: relative;
			}
			.box{
			    width: 220px;
			    height: 350px;
			    margin: 0 10px 10px 0;
			    background-color: #e8e8e8;}
				
			#bottom .box p{
				font-size: 10px;
					margin-top: 0;
				}
			 .box p:last-child{
			     font-size: 13px;
			     color: blue;
			 }
		</style>
	</head>
	<body>
		<div id="top">
			<button>变成3列</button>
			<button>变成4列</button>
			<button>变成5列</button>
			<button>变成6列</button>
			</div>
		</div>
		<div id="bottom">
			<div class="box">
			    <img src="image/1.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/2.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/3.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/4.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/5.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/6.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/7.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/8.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/9.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/10.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/11.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/12.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/13.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/14.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
			<div class="box">
			    <img src="image/15.jpg" alt="">
			    <p>因为遇见你</p>
			    <p>孙怡邓伦牵手演绎刺绣奇缘</p>
			</div>
		</div>
		<script>
			window.onload = function(){
				var cols; var idbox;
				//获取目标
				var btn = document.getElementById("top").children;
				var bottom = document.getElementById("bottom");
				//对按钮进行监听
				btn[0].onclick = function(){
					changeli(3, bottom);
				};
				btn[1].onclick = function(){
					changeli(4, bottom);
				};
				btn[2].onclick = function(){
					changeli(5, bottom);
				};
				btn[3].onclick = function(){
				changeli(6, bottom);
				};
				
				//计算函数长度
				function changeli(cols, idbox){
					var boxw = 220, boxh = 350, marginxy = 10;
					//遍历
					for(var i=0; i<idbox.children.length; i++){
						var col = parseInt(i % cols);
						var row = parseInt(i / cols);
						console.log("当前盒子在第" + row  + " ,第" + col);
						
						
						  var cbox = idbox.children[i];
						  cbox.style.position = 'absolute';
						  cbox.style.left = col * (boxw + marginxy) + 'px';
						  cbox.style.top = row * (boxh + marginxy) + 'px';
						  
					}
				}(cols, idbox);
				
			}
			
		</script>
	</body>
</html>
